<template>
  <div id="write-article">
    <div id="top-bar">
      <a-input v-model:value="title" placeholder="文章标题"></a-input>
      <a-input v-model:value="tags" placeholder="文章标签，以空格分割"></a-input>
      <a-button @click="handlePostArticle({title, content: MDContent, tags: splitedTags})">发布</a-button>
    </div>
    <v-md-editor
      :disabled-menus="[]"
      @upload-image="handleUploadImage"
      v-model="MDContent" height="82vh"></v-md-editor>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import useMDEditorImageUploader from '@composable/image-upload-mdeditor-integration';
import useArticleApi from '@composable/article-api';
import { useRouter } from 'vue-router';


const title = ref('');
const tags = ref('');
const MDContent = ref('写点什么吧...');
const router = useRouter();


const { t } = useI18n();
const { handlePostArticle } = useArticleApi(() => router.push('/main/dzone/articles'));
const { handleUploadImage } = useMDEditorImageUploader();


const splitedTags = computed(() => {
  // 分割、过滤空串
  return tags.value.split(/\s+/)
        .filter(s => !s.match(/^\s*$/));
})
</script>

<style scoped>
#md-editor {
  width: 100%;
  height: 100%;
}
#top-bar {
  display: flex;
  flex-direction: row;
}
</style>